<!DOCTYPE html>
<html lang="en">
	<head>
		<title>nTube 1.5</title>
		<meta name="application-name" content="nTube" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=1" />
		<meta name="description" content="nTube: Home." />
		<meta charset="UTF-8" />
		<meta name="robots" content="nofollow" />
		<meta name="theme-color" content="#282828" />
		<link rel="manifest" href="/manifest.json" />
		<link rel="preload" href="resources/promise-queues.js" as="script" />
		<link rel="preload" href="resources/libWeb.js" as="script" />
		<link rel="preload" href="resources/settings.js" as="script" />
		<link rel="preload" href="resources/base.js" as="script" />
		<link rel="preload" href="resources/commander.js" as="script" />
		<link rel="apple-touch-icon" href="/resources/logos/ntube-logo-192.png" />
		<script src="resources/promise-queues.js"></script>
		<script src="resources/libWeb.js"></script>
		<script src="resources/settings.js"></script>
		<script src="resources/base.js"></script>
		<script src="resources/search.js"></script>
		<script src="resources/commander.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/search.css" />
		<link rel="stylesheet" type="text/css" href="resources/base.css" />
		<link rel="stylesheet" type="text/css" href="resources/commander.css" />
		<link rel="search" type="application/opensearchdescription+xml" title="Search not(You)Tube." href="/nsearch.xml" />
		<style id="poly-item-css">
			.poly-item {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(255, 255, 255, 0.11), 0 10px 10px rgba(255, 255, 255, 0.08);
				border: 1px solid white;
				margin-bottom: 10px;
			}
		</style>
		<style id="body-css">
			body {
				background-color: black;
				color: white;
			}
		</style>
		<style>
			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid green;
				margin-right: 0px;
				z-index: 15;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
			}

			.menu-item {
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-webkit-flex: 1;
				-ms-flex: 1;
				flex: 1;
				max-width: 50%;
				overflow: hidden;
				white-space: nowrap;
			}

			.poly-item-light {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
				border: 1px solid black;
				margin-bottom: 10px;
			}

			@-webkit-keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}

			@-moz-keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}

			@keyframes slide {
				0% {
					background-position: 0% 0;
				}

				100% {
					background-position: 100% 0;
				}
			}
		</style>
		<style id="_css_fonts">
			html {
				font-family: -apple-system, BlinkMacSystemFont, "Product Sans", "Google Sans", "Segoe UI", "Arial", sans-serif;
			}
		</style>
	</head>

	<body>
		<div id="-ntube-menu" class="menu">
			<div class="menu-item">
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/trending" title="Trending Videos">
						<img src="resources/icons/trending.svg" alt="trending" style="height: 2em; width: 2em" loading="lazy" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 3px">
					<a href="/settings" title="Settings">
						<img src="resources/icons/settings.svg" alt="settings" style="height: 2em; width: 2em" loading="lazy" decoding="async" />
					</a>
				</div>
			</div>
			<div class="menu-item">
				<div style="height: 100%; display: flex">
					<style>
						#search_overlay {
							z-index: 8;
							position: fixed;
							background-color: rgba(0, 0, 0, 0.95);
							width: 100%;
							height: 100%;
							top: 0px;
							left: 0px;
						}

						.search_hidden {
							display: none;
							visibility: hidden;
						}

						#search_bar {
							background-color: inherit;
							color: inherit;
							border: none;
							border-left: 1px solid green;
							height: 100%;
							transition: border-bottom 0.5s ease-in-out;
							font-family: monospace;
							font-size: large;
							text-indent: 5px;
							flex-grow: 1;
							min-width: 50%;
						}

						#search_bar:focus {
							border-bottom: 1px solid green;
						}

						#search_button {
							border: none;
							border-left: 1px solid rgba(0, 128, 0, 0.7);
							border-right: none;
							height: 100%;
							background-color: inherit;
							color: inherit;
							margin-right: 0px;
							font-family: inherit;
						}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." />
					<button id="search_button" onclick="search_start(null);">Search</button>
				</div>
			</div>
			<script>
				run_promise(function () {
					SearchBar.init();
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div id="search_overlay" class="search_hidden">
			<div style="padding-bottom: 30px"></div>
			<!--search_hidden-->
			<div style="width: 100%">
				<div style="float: left; padding-left: 5px">
					<h1 style="margin-top: 5px; margin-bottom: 5px">Search.</h1>
					<h3 style="margin-top: 5px; margin-bottom: 10px">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right; padding-right: 15px; padding-top: 15px">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 30px); height: 78%; margin-right: 0px; overflow-y: auto; margin-left: 5px">
				<div class="search-item">
					<a class="search-link" href="#gotoShittyVideo">
						<img decoding="async" src="" alt="TOTALLY NOT CLICKBAIT" style="padding-left: 5px; display: inline; vertical-align: middle; width: 220px; height: 160px; margin-bottom: 5px" />
						<div style="padding-left: 15px; display: inline; vertical-align: middle">
							<p style="position: absolute; display: inline; vertical-align: middle; font-size: large; margin-top: 15px">CLICKBAIT TITLE</p>
							<p style="position: absolute; display: inline; vertical-align: bottom; font-size: small; margin-top: 45px">00:00 | -1 | <a href="#gotoShittyChannel">CHANNEL #2492049</a></p>
						</div>
					</a>
				</div>
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
				id("_search_results").innerHTML = "";
			</script>
		</div>
		<style>
			#-general-loading {
				position: relative;
				top: 23.5px;
				left: 0px;
				z-index: 15;
				width: calc(100% + 18px);
				background-color: transparent;
				margin-left: -10px;
				margin-top: 0px;
			}

			#-general-loader {
				-webkit-animation: go 1s infinite alternate ease;
				animation: go 1s infinite alternate ease;
			}
		</style>
		<canvas id="--confetti-cannon" style="position: fixed; z-index: 32; pointer-events: none"></canvas>
		<div class="wrapper" id="-general-loading" style="display: none; visibility: hidden">
			<div class="loader" id="-general-loader">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="commander_overlay" class="commander_overlay" style="display: none; visibility: hidden">
			<div id="commander_main_div" class="commander_mdiv">
				<input id="commander_text_input" class="commander_text_box" type="text" value="" placeholder="nTube Commander." />
				<p class="commander_text_out" id="commnader_text_output" style="display: none; visibility: hidden">Ready.</p>
			</div>
		</div>
		<div style="padding-bottom: 30px"></div>
		<center>
			<h1 style="font-size: 42px">
				<span style="color: red">not</span><span style="color: lightgreen"><span title="No really, it's not notYouTube its notTube." id="ntube-logo-you" style="color: gray">You</span>Tube</span>.
				<sup style="font-size: medium">1.5.9</sup> <br />
				<img
					decoding="async"
					loading="lazy"
					id="ntube-winter-logo"
					src="resources/events/christmas.png"
					title="Merry Christmas!"
					style="display: none; visibility: hidden; width: 80px; height: 60px; position: absolute; top: 36px; left: calc(50% - 180px)"
				/>
			</h1>
		</center>
		<center>
			<style>
				.good_a {
					color: inherit;
					text-decoration: underline inherit;
				}
			</style>
			<p id="-ntube-links">
				<a class="good_a" href="/about">About</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/browser_check">Browser Checkup</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/changelog">Changelog</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/frontpage">Frontpage</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/settings">Settings</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/trending">Trending</a>
				&nbsp;&centerdot;
				<a class="good_a" href="/watch_later">Watch Later</a>
			</p>
		</center>
		<noscript>
			<div class="poly-item" style="border: 1px solid orangered">
				<h3 style="margin-top: 5px; margin-bottom: 10px">Warning.</h3>
				<p style="margin-top: 5px; margin-bottom: 5px">
					You seem to be missing JavaScript support which greatly limits the features of nTube. <br />
					Click <a class="good_a" href="/watch_fallback">here</a> to be visit the fallback NoScript video page. <br />
					<i>NOTE: You need to provide a video ID in order to use it.</i>
				</p>
			</div>
		</noscript>
		<div class="poly-item">
			<h3 style="margin-top: 5px; margin-bottom: 5px">Subscriptions.</h3>
			<div id="-subscriptions-div" style="display: flex; flex-direction: row; flex-wrap: wrap">
				<p id="-subscriptions-nothing-notice" style="margin-top: 5px; margin-bottom: 10px">You don't seem to be subscribed to anyone.</p>
			</div>
		</div>
		<div class="poly-item" style="display: none; visibility: hidden">
			<!-- TODO(1.5-rc4): ENABLE THIS -->
			<p style="margin-top: 5px; margin-bottom: 5px; float: left">Looking for a seamless nTube experience? Install the nTubeifier user script to automatically redirect to nTube!</p>
			<a class="good_a" href="/extensions/nTubeifier.user.js" style="float: right; margin-right: 5px; margin-top: 5px">Install</a>
			<p style="margin-top: 5px; margin-bottom: 5px; clear: both; font-size: small"><span style="color: orange">This userscript is experimental and feature incomplete.</span>&nbsp;Requires a UserScript manager.</p>
		</div>
		<div id="--home-dev-info" class="poly-item" style="border: 1px solid orange; background: repeating-linear-gradient(45deg, transparent, rgba(235, 109, 5, 0.2) 8px); display: none; visibility: hidden">
			<h3 style="margin-top: 5px; margin-bottom: 10px">Under development!</h3>
			<p style="margin-top: 5px; margin-bottom: 10px">
				This is a release candidate, things may break, planes may hit towers, you know. <br />
				You might want to visit <a href="/settings" style="color: inherit; text-decoration: gray underline">Settings</a> to configure nTube. <br />
			</p>
			<b>Known Issues.</b>
			<ul>
				<li>nPlayerNX is still a beta and may behave incorrectly.</li>
				<li>Content with DRM will only work with Redwood, other players are being worked on.</li>
				<li>YouTube livestreams are currently experimental.</li>
				<li>360 video support is experimental.</li>
				<li>Currently English is only supported, 1.6 will add localization support.</li>
				<li>Some spelling mistakes may still be present, blame late night coding for that.</li>
				<li>Livestream chat is still experimental.</li>
				<li>The web server hasn't been hardened security-wise, exposing this to the open web might not be a good idea yet. (WIP)</li>
				<li>The web server doesn't play well with services like Cloudflare, which cache content. <i style="font-family: monospace">(WONT_FIX)</i></li>
				<li>Some browsers cannot handle lazy domains for the OpenSearch entry. <i style="font-family: monospace">(WONT_FIX)</i></li>
			</ul>
			<p style="margin-top: 5px; margin-bottom: 10px">Found a different bug? Report it on the issue tracker!</p>
		</div>
		<div class="poly-item" style="border: 1px solid lightgreen; display: none; visibility: hidden">
			<h3 style="margin-top: 5px; margin-bottom: 10px">Now better than ever.</h3>
			<p style="margin-top: 5px; margin-bottom: 10px">
				nTube 1.5 is the successor of 1.4.4. New UI, more features, better performance.
				<br />
				Here's a tl;dr for old and new users:
			</p>
			<ul>
				<li>You can search for content on the top right.</li>
				<li>The menu bar provides three shortcuts: Homepage, Trending and Settings.</li>
				<li>UI elements can be hidden within sections, they should highlight themselves if they are showable.</li>
				<li>The menu/top-bar is now persistent to the top of the window.</li>
				<li>Trending now has it's own page.</li>
				<li>Video playback quality is dynamic and uses the bandwidth available.</li>
				<li>Comments and channels now support multiple pages.</li>
				<li>The settings page is your best friend.</li>
			</ul>
		</div>
		<style id="ntube-custom-css"></style>
		<script>
			function hasSettings() {
				try {
					const y = Settings.load("ntube_settings");
					return y !== null && isJson(y);
				} catch (e) {
					console.error(e);
					return false;
				}
			}
			try {
				nTube.init();
				nTube.initTheming();
			} catch (e) {}
			console.debug("Loading settings...");
			const setObject = nTubeSettings.auto();
			window.__SETTINGS_OBJECT = setObject;
			window.Config = window.__SETTINGS_OBJECT; // COMPAT HACK
			if (window.__SETTINGS_OBJECT.appearance.enable_new_look) {
				id("poly-item-css").innerHTML = ".poly-item {padding-left: 5px; box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 10px;}";
				try {
					id("collapsible-css").innerHTML = ".active, .collapsible:hover {background-color: rgba(80, 80, 80, 0.3);}";
				} catch (e) {}
			}
			if (window.__SETTINGS_OBJECT.appearance.custom_css) {
				try {
					id("ntube-custom-css").innerHTML = base64Decode(window.__SETTINGS_OBJECT.appearance.custom_css);
				} catch (e) {
					console.error(e);
				}
			}
			if (window.__SETTINGS_OBJECT.appearance.use_newer_ui_preset) {
				try {
					id("body-css").innerHTML = "body {background-color: #111111; color: white;}";
				} catch (e) {
					console.error(e);
				}
			}
			if (setObject.global && setObject.global.subscriptions) {
				run_promise(function () {
					show(id("-general-loading"));
					const sdiv = id("-subscriptions-div");
					const subscriptions = setObject.global.subscriptions;
					if (subscriptions.length > 0) {
						id("-subscriptions-nothing-notice").innerHTML = "Loading...";
						sdiv.innerHTML = "";
						for (var i = 0; i < subscriptions.length; i++) {
							const subscription = subscriptions[i];
							const e = document.createElement("div");
							e.setAttribute("channelID", subscription.channelID);
							e.classList.add("poly-item", "subscriptions-div-poly");
							e.style.width = "100%";
							e.style.marginRight = "5px";
							const tl = document.createElement("div");
							tl.style.marginLeft = "-5px";
							const pfp = document.createElement("img");
							pfp.decoding = "async";
							pfp.loading = "lazy";
							pfp.classList.add("subscriptions-profile-picture");
							pfp.src = subscription.avatarURL;
							tl.appendChild(pfp);
							const cnm = document.createElement("h4");
							cnm.classList.add("subscriptions-channel-name");
							cnm.innerHTML = subscription.channelName;
							tl.appendChild(cnm);
							e.appendChild(tl);
							const vids = document.createElement("div");
							vids.classList.add("subscriptions-video-container");
							request(
								"/api/channel?c=" + subscription.channelID + "&sub&backend=channel-sub",
								null,
								function (error) {
									console.error("Error while fetching: " + subscription.channelID, error);
								},
								function (data) {
									const jsonObject = JSON.parse(data);
									for (var iv = 0; iv < jsonObject.videos.length; iv++) {
										const vid = jsonObject.videos[iv];
										console.debug("videoID: " + vid["videoID"] + ", lastVideoID: " + subscription.lastVideoID);
										if (vid["videoID"] === subscription.lastVideoID) {
											if (iv === 0) {
												vids.innerHTML = "";
												const upd = document.createElement("p");
												upd.innerHTML = "You are up to date!";
												upd.style.marginLeft = "5px";
												upd.style.marginBottom = "5px";
												upd.style.marginTop = "5px";
												vids.appendChild(upd);
											}
											break;
										}
										const vidDiv = document.createElement("div");
										vidDiv.classList.add("subscription_video", "poly-item", "subscription_video_poly");
										vidDiv.style.marginBottom = "5px";
										const link1 = document.createElement("a");
										link1.href = vid["url"];
										const image2 = document.createElement("img");
										image2.style.verticalAlign = "middle";
										image2.style.display = "table-row";
										image2.style.width = "160px";
										image2.style.height = "90px";
										image2.loading = "lazy";
										image2.decoding = "async";
										if (vid["ani_thumb"]) {
											const im = vid.thumbnail;
											const ia = vid.ani_thumb;
											image2.src = im;
											image2.onmouseover = function () {
												image2.src = ia;
											};
											image2.onmouseout = function () {
												image2.src = im;
											};
										} else {
											image2.src = vid.thumbnail;
										}
										link1.appendChild(image2);
										vidDiv.appendChild(link1);
										var contentDiv = document.createElement("div");
										contentDiv.classList.add("subscription_video_idiv");
										contentDiv.style.verticalAlign = "middle";
										contentDiv.style.paddingLeft = "5px";
										contentDiv.style.paddingRight = "5px";
										var videoTitle = document.createElement("h3");
										videoTitle.style.verticalAlign = "middle";
										videoTitle.style.margin = "0px auto";
										videoTitle.innerHTML = vid.title;
										contentDiv.appendChild(videoTitle);
										var videoDescription = document.createElement("p");
										videoDescription.style.verticalAlign = "bottom";
										videoDescription.style.margin = "0px";
										videoDescription.style.fontSize = "small";
										if (vid.duration == -2) {
											videoDescription.innerHTML = "LIVE";
										} else if (vid.duration == -3) {
											videoDescription.innerHTML = "UPCOMING";
											if (vid["startTime"]) {
												videoDescription.innerHTML += " &centerdot; " + nTubeUtils.Times.timeSince(new Date(vid["startTime"] * 1000)).substring(1) + " remaining.";
											}
										} else {
											videoDescription.innerHTML = seconds2time(vid.duration);
										}
										contentDiv.appendChild(videoDescription);
										vidDiv.appendChild(contentDiv);
										vids.appendChild(vidDiv);
									}
									e.appendChild(vids);
									sdiv.appendChild(e);
								}
							);
						}
					}
					hide(id("-general-loading"));
				});
			}
			if (!wantsReducedMotion() && !isBattery()) {
				run_promise(function () {
					const po = "slide 20s infinite linear forwards";
					id("--home-dev-info").style.backgroundSize = "101vh 100%";
					id("--home-dev-info").style.animation = po;
					id("--home-dev-info").style.mozAnimation = po;
					id("--home-dev-info").style.webkitAnimation = po;
				});
			}
		</script>
		<style>
			noindex:-o-prefocus,
			#-subscriptions-div {
				flex-direction: column !important;
				/* Opera Hack: Opera >12's FlexBox implementation sucks, fall back to dumb view. */
			}

			.subscriptions-profile-picture {
				width: 35px;
				height: 35px;
				vertical-align: middle;
				display: inline-block;
			}

			.subscriptions-channel-name {
				vertical-align: middle;
				display: inline-block;
				margin-bottom: 5px;
				margin-top: 5px;
				margin-left: 5px;
			}

			.subscription_video {
				width: calc(50% - 5px);
				display: inline-flex;
				flex: 1;
				flex-basis: calc(50% - 5px);
			}

			.subscription_video_idiv {
				display: table-cell;
				margin: auto 0px;
			}

			.subscription_video_poly {
				padding-left: 0px !important;
				margin-right: 2px;
				margin-bottom: 2px !important;
			}

			.subscriptions-video-container {
				max-height: 21vh;
				height: auto;
				overflow-y: scroll;
				border-right: 1px solid darkseagreen;
			}

			@media only screen and (max-width: 600px) {
				.subscription_video {
					flex-basis: 100vw !important;
					width: 100% !important;
				}
			}

			.-webapp-disconnected {
				z-index: 100;
				position: fixed;
				bottom: 0px;
				left: 0px;
				background-color: #111111;
				color: white;
				width: 100%;
				padding: 5px;
			}

			.wrapper {
				position: relative;
				width: 100%;
				height: 2px;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: 0;
				margin-left: -5px;
				margin-top: -5px;
				background-color: green;
			}

			.loader {
				height: 100%;
				display: flex;
				-webkit-transform: translateZ(0);
				transform: translateZ(0);
			}

			.loader div {
				flex: 1;
				background: salmon;
				-webkit-animation: go 0.8s infinite alternate ease;
				animation: go 0.8s infinite alternate ease;
				box-shadow: 0 0 20px salmon;
			}

			.loader div:nth-child(1) {
				-webkit-animation-delay: -0.72s;
				animation-delay: -0.72s;
			}

			.loader div:nth-child(2) {
				-webkit-animation-delay: -0.64s;
				animation-delay: -0.64s;
			}

			.loader div:nth-child(3) {
				-webkit-animation-delay: -0.56s;
				animation-delay: -0.56s;
			}

			.loader div:nth-child(4) {
				-webkit-animation-delay: -0.48s;
				animation-delay: -0.48s;
			}

			.loader div:nth-child(5) {
				-webkit-animation-delay: -0.4s;
				animation-delay: -0.4s;
			}

			.loader div:nth-child(6) {
				-webkit-animation-delay: -0.32s;
				animation-delay: -0.32s;
			}

			.loader div:nth-child(7) {
				-webkit-animation-delay: -0.24s;
				animation-delay: -0.24s;
			}

			.loader div:nth-child(8) {
				-webkit-animation-delay: -0.16s;
				animation-delay: -0.16s;
			}

			.loader div:nth-child(9) {
				-webkit-animation-delay: -0.08s;
				animation-delay: -0.08s;
			}

			.loader div:nth-child(10) {
				-webkit-animation-delay: 0s;
				animation-delay: 0s;
			}

			@-webkit-keyframes go {
				100% {
					background: transparent;
					flex: 10;
					box-shadow: 0 0 0 transparent;
				}
			}

			@keyframes go {
				100% {
					background: transparent;
					flex: 10;
					box-shadow: 0 0 0 transparent;
				}
			}
		</style>
		<div id="-webapp-disconnected-div" class="-webapp-disconnected" style="display: none; visibility: hidden; opacity: 0">
			<div class="wrapper" id="-webapp-disconnected-loader">
				<div class="loader">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<h3 style="margin-top: 5px; margin-bottom: 5px">Reconnecting with nTube's instance...</h3>
			<p style="margin-top: 5px; margin-bottom: 5px">This will only take a moment.</p>
		</div>
		<script>
			try {
				function isPWA() {
					if (!window.matchMedia) return false;
					return ["fullscreen", "standalone", "minimal-ui"].some(function (displayMode) {
						return window.matchMedia("(display-mode: " + displayMode + ")").matches;
					});
				}
				function hasServiceWorker() {
					return navigator && navigator.serviceWorker && "controller" in navigator.serviceWorker && navigator.serviceWorker.controller !== null && navigator.serviceWorker.controller !== undefined;
				}
				if (isPWA() || hasServiceWorker()) {
					show(id("-webapp-disconnected-div"));
					fadein(id("-webapp-disconnected-div"), function () {
						id("search_button").disabled = true;
						id("-ntube-links").style.pointerEvents = "none";
						id("-ntube-menu").style.pointerEvents = "none";
						function pwa_check_loop() {
							request(
								"/api/pwa/present",
								function (error) {
									console.error("Failed to get an instance connection!", error);
									setTimeout(pwa_check_loop, 1200);
								},
								function (data) {
									const o = JSON.parse(data);
									if (o["present"]) {
										id("search_button").disabled = false;
										id("-ntube-links").style.pointerEvents = "";
										id("-ntube-menu").style.pointerEvents = "";
										fadeout(id("-webapp-disconnected-div"), function () {
											hide(id("-webapp-disconnected-div"));
										});
									}
								}
							);
						}
						pwa_check_loop();
					});
				}
			} catch (e) {
				console.error(e);
			}
		</script>
	</body>
</html>
